<!--
 * @Description: logo component
-->
<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <img :src="config?.logo" />
    <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
      {{ config.name }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref, watch, onMounted, ref } from "vue"
  import { useGlobSetting } from "/@/hooks/setting"
  import { useGo } from "/@/hooks/web/usePage"
  import { useMenuSetting } from "/@/hooks/setting/useMenuSetting"
  import { useDesign } from "/@/hooks/web/useDesign"
  import { PageEnum } from "/@/enums/pageEnum"
  import { useUserStore } from "/@/store/modules/user"
  const config = ref<any>({})
  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ["light", "dark"].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
    publicConfig: { type: Object },
  })

  
  const init = (publicConfig) => {
    if (!publicConfig) {
      config.value.logo = "/default-logo.png"
      return
    }
    config.value = publicConfig
    if (!publicConfig.logo) {
      config.value.logo = "/default-logo.png"
    }
    console.log(config.value, '-------------------')
  }

  onMounted(() => {
    init(props.publicConfig)
  })

  watch(
    () => props.publicConfig?.name,
    (name: any) => {
      config.value = props.publicConfig || {}
    },
    { immediate: true}
  )

  const { prefixCls } = useDesign("app-logo")
  const { getCollapsedShowTitle } = useMenuSetting()
  const userStore = useUserStore()
  // const { title } = useGlobSetting();

  const go = useGo()

  const getAppLogoClass = computed(() => [prefixCls, props.theme, { "collapsed-show-title": unref(getCollapsedShowTitle) }])

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      "xs:opacity-0": !props.alwaysShowTitle,
    },
  ])

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~"@{namespace}-app-logo";

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
    transition: all 0.2s ease;
    &.light {
      // border-bottom: 1px solid @border-color-base;
      border-bottom: 0;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      color: #555;
    }

    &.dark &__title {
      color: @white;
    }

    &__title {
      font-size: 20px;
      // font-weight: bold;
      font-family:
        Arial,
        Microsoft YaHei,
        sans-serif;
      transition: all 0.5s;
    }
  }
</style>
